<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期计算工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }

        .card {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .quick-select-btn {
            margin: 5px;
        }

        .result-date {
            font-size: 1.2rem;
            font-weight: bold;
            color: #0d6efd;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">日期计算工具</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <label class="form-label">快速选择时间段：</label>
                            <div class="d-flex flex-wrap">
                                <button class="btn btn-outline-primary quick-select-btn" data-days="7">一周前</button>
                                <button class="btn btn-outline-primary quick-select-btn" data-days="30">一个月前</button>
                                <button class="btn btn-outline-primary quick-select-btn" data-days="90">三个月前</button>
                                <button class="btn btn-outline-primary quick-select-btn" data-days="180">半年前</button>
                                <button class="btn btn-outline-primary quick-select-btn" data-days="365">一年前</button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="customDays" class="form-label">自定义天数：</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="customDays" min="1" value="1">
                                <button class="btn btn-primary" id="calculateBtn">计算</button>
                            </div>
                        </div>
                        <div class="result-section">
                            <h6>计算结果：</h6>
                            <div class="alert alert-info">
                                <div class="mb-2">目标日期：<span id="resultDate" class="result-date"></span></div>
                                <div>星期：<span id="resultWeekday"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const daysAgo = n => {
            let d = new Date();
            d.setDate(d.getDate() - Math.abs(n));
            return d;
        };

        function formatDate(date) {
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        }

        function getWeekday(date) {
            return date.toLocaleDateString('zh-CN', { weekday: 'long' });
        }

        function updateResult(days) {
            const targetDate = daysAgo(days);
            document.getElementById('resultDate').textContent = formatDate(targetDate);
            document.getElementById('resultWeekday').textContent = getWeekday(targetDate);
        }

        // 快速选择按钮事件
        document.querySelectorAll('.quick-select-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const days = parseInt(btn.dataset.days);
                document.getElementById('customDays').value = days;
                updateResult(days);
            });
        });

        // 自定义计算按钮事件
        document.getElementById('calculateBtn').addEventListener('click', () => {
            const days = parseInt(document.getElementById('customDays').value) || 1;
            updateResult(days);
        });

        // 初始化显示
        updateResult(1);
    </script>
</body>

</html>